<template>
    <div class="app">
        <div class="details">
            <div style="display: flex;flex-direction: row;align-items: center;">
                <el-button disabled>
                    <i class="iconfont task-popover-botton-icon" :class="itemData.icon" :style="{color:itemData.color}"></i>
                    <span class="task-popover-botton-title">{{itemData.label}}</span>
                </el-button>
                <!-- <choose-status-botton :docForm="docForm"></choose-status-botton> -->
                <el-button @click="startClick" style="margin-left: 10px;" type="primary" plain v-if="docForm.modelId&& docForm.createBy==$store.getters.sysUser.userId && docForm.status != '02' && docForm.status != '04'&&docForm.status != '01'">发起审批</el-button>
            </div>
            <div class="details-header-button" v-if="!executeTaskId">
                <i class="details-header-button-icon el-icon-refresh-right" @click="refreshClick" :class="[refreshLoading == true?'refreshRe':'']"></i>
                <i class="details-header-button-icon el-icon-edit" @click="edidClick"></i>
                <i class="details-header-button-icon el-icon-delete" @click="deteleClick"></i>
            </div>
        </div>
        <!-- 执行任务 -->
        <execute-task v-if="executeTaskId" :processInstanceId="processInstanceId" :visible.sync="dialogExcuteTaskVisible" :executeTaskId="executeTaskId" @executeTaskFinished='toDoQueryClick'></execute-task>
        <CCExecuteTask v-if="!executeTaskId&&ccToMe" :processInstanceId="processInstanceId"></CCExecuteTask>
        <img :src="imagePath" style="width:800px" v-if="docForm.processInstanceId&&mySelf==true">
        <div class="details-content">
            <span class="details-content-title">{{docForm.version}}</span>
            <div class="details-content-misc">
                <div class="item">
                    <span class="details-content-misc-name">{{docForm.createBy}}</span>
                </div>
                <div class="item">
                    <span class="details-content-misc-subtitle" v-if="docForm.createTime"> 创建于
                        {{docForm.createTime}}</span>
                </div>
                <div class="item">
                    <span class="details-content-misc-subtitle" v-if="docForm.updateTime">, 最近更新于
                        {{docForm.updateTime}}</span>
                </div>
            </div>
            <div class="details-content-fields" v-if="formData">
                <parser :value="docForm.formData" :form-conf="formData" ref="parser" />
                <div class="details-content-isMask"></div>
            </div>
            <div class="details-content-richtext">
                <span>{{docForm.content}}</span>
            </div>
            <!-- <div class="details-content-subtask">
				<span class="details-content-subtask-title">附件:</span>
				<div class="details-content-operation-item"   v-if="docForm.docFilePath && docForm.docFilePath.length != 0" v-for="(items,index) in docForm.docFilePath">
					<i class="iconfont icon-fujian-copy task-enclosure-icon"  @click="fileClick(items)"></i>
					<span class="task-enclosure-title"  @click="fileClick(items)">{{items.fileName}}</span>
				</div>
			</div> -->
            <el-tabs v-model="operation">

                <el-tab-pane label="附件" name="docFilePath">
                    <div class="details-content-operation-item" v-if="docForm.docFilePath && docForm.docFilePath.length != 0" v-for="(items,index) in docForm.docFilePath">
                        <i class="iconfont icon-fujian-copy task-enclosure-icon" @click="fileClick(items)"></i>
                        <span class="task-enclosure-title" @click="fileClick(items)">{{items.fileName}}</span>
                    </div>
                    <!-- <el-empty v-if="operationLog && operationLog.length == 0" description="暂无日志"></el-empty> -->
                </el-tab-pane>
                <el-tab-pane label="操作日志" name="second">
                    <div class="details-content-operation-item" v-for="item in operationLog">
                        <i class="el-icon-edit details-content-operation-item-icon"></i>
                        <span class="details-content-operation-item-name">{{item.createName}}</span>
                        <span class="details-content-operation-item-title">{{item.content}}</span>
                        <span class="details-content-operation-item-date">{{item.createTime}}</span>
                    </div>
                    <el-empty v-if="operationLog && operationLog.length == 0" description="暂无日志"></el-empty>
                </el-tab-pane>
            </el-tabs>
        </div>

    </div>
</template>

<script>
import { getToken } from "@/utils/auth";
import { queryById, del, processStart, procDoc } from "@/api/prodVer.js";
// import chooseStatusBotton from './components/prodStatus'
import utils from "../../../utils/utils.js";
import { deleteAction, getAction, postAction, putAction } from "@/api/manage";
import Parser from "@/components/FormGenerator/components/parser";
import { list as logList } from "@/api/log.js";
import { Message } from "element-ui";
import ExecuteTask from "@/components/task/ExecuteTask.vue";
import CCExecuteTask from "@/components/task/CCExecuteTask.vue";
import { list } from "@/api/doc.js";
export default {
    name: "produceReleaseDetails",
    data() {
        return {
            mySelf: false,
            imagePath: "",
            form: [
                {
                    value: "00",
                    label: "待审批",
                    type: false,
                    color: "rgb(100, 203, 148)",
                    icon: "icon-icon-daishenpi-copy",
                    taskType: 0,
                },
                {
                    value: "01",
                    label: "审批中",
                    type: false,
                    color: "rgb(86, 198, 255)",
                    icon: "icon-shenhezhong-copy",
                    taskType: 0,
                },
                {
                    value: "02",
                    label: "已审批",
                    type: false,
                    color: "rgb(70, 216, 171)",
                    icon: "icon-yiwancheng-copy",
                    taskType: 0,
                },
                {
                    value: "03",
                    label: "已驳回",
                    type: false,
                    color: "rgb(80, 196, 27)",
                    icon: "icon-bohui",
                    taskType: 0,
                },
                {
                    value: "04",
                    label: "已关闭",
                    type: false,
                    color: "rgb(248, 120, 103)",
                    icon: "icon-yemian-1",
                    taskType: 0,
                },
            ],
            itemData: {},
            refreshLoading: false,
            operation: "docFilePath",
            operationLog: [],
            docForm: { modelId: "" },
            formData: "",
            executeTaskId: "",
            dialogExcuteTaskVisible: false,
            processInstanceId: "",
            ccToMe: false,
            listQuery: {
                current: 1,
                size: 10,
                docType: "09",
                deleted: 0,
                isUpdate: 0,
                isMyCreate: 0,
                name: "",
                docTypeId: "",
            },
        };
    },
    components: {
        Parser,
        ExecuteTask,
        CCExecuteTask,
    },
    filters: {},
    created() {
        var queryData = JSON.parse(this.$route.query.data);
        console.log(queryData);
        if (queryData.mySelf) {
            this.mySelf = queryData.mySelf;
        }
        if (queryData.verId) {
            this.docForm.verId = queryData.verId;
            this.processInstanceId = queryData.id;
            if (queryData.type == "ccToMe") {
                this.ccToMe = true;
            }
            this.queryClick();
        }
        if (queryData.processInstanceId) {
            this.processInstanceId = queryData.processInstanceId;
            this.executeTaskId = queryData.releaseId;
            this.toDoQueryClick();
        }
    },
    methods: {
        showImage() {
            if (!this.imagePath) {
                this.imagePath =
                    `${process.env.VUE_APP_BASE_API}` +
                    "/flowable/processInstanceImage?processInstanceId=" +
                    this.docForm.processInstanceId +
                    "&access_token=" +
                    getToken() +
                    "&time=" +
                    new Date();
                console.log(this.imagePath);
            }
        },
        documentclick() {
            var _this = this;
            console.log(this.docForm);
            this.listQuery.docTypeId = this.docForm.verId;
            list(_this.listQuery).then((res) => {
                _this.docForm.docFilePath = res.data.docData[0].docFilePath;
                // _this.total = res.data.docData.length
            });
        },
        filterItem(data) {
            var _this = this;
            _this.itemForm = JSON.parse(JSON.stringify(_this.form));
            _this.itemForm.forEach(function (item, index) {
                if (item.value == data) {
                    _this.itemData = item;
                    _this.visible = false;
                    _this.itemForm.splice(index, 1);
                }
            });
        },
        toDoQueryClick() {
            var _this = this;
            procDoc({
                processInstanceId: this.processInstanceId,
            }).then((res) => {
                console.log(res);
                _this.docForm = res.data;
                if (res.data.formData) {
                    _this.docForm.formData = JSON.parse(res.data.formData);
                }
                _this.manageClick(res.data);
                _this.loadLogList();
                _this.filterItem(res.data.status);
                _this.documentclick();
            });
        },
        // 正常模式
        queryClick() {
            var _this = this;
            queryById({
                id: this.docForm.verId,
            }).then((res) => {
                console.log(res);
                _this.docForm = res.data;
                if (res.data.formData) {
                    _this.docForm.formData = JSON.parse(res.data.formData);
                }
                _this.manageClick(res.data);
                _this.loadLogList();
                _this.filterItem(res.data.status);
                _this.documentclick();
                _this.showImage();
            });
        },
        manageClick(data) {
            console.log(data);
            var _this = this;
            this.formData = data.formJson;
            if (data.formKey) {
                getAction(
                    "/flowable/form/queryById",
                    {
                        id: data.formKey,
                    },
                    false
                ).then(({ data }) => {
                    if (data.formJson) {
                        _this.formData = JSON.parse(data.formJson);
                    }
                });
            }
        },
        // 操作
        loadLogList() {
            var _this = this;
            console.log(this.taskForm);
            logList(
                {
                    logTypeId: _this.docForm.prodId,
                    logType: "07",
                },
                false
            ).then((res) => {
                _this.operationLog = res.data;
                console.log(res);
            });
        },
        refreshClick() {
            var _this = this;
            this.refreshLoading = true;
            if (_this.executeTaskId) {
                this.toDoQueryClick();
            } else {
                this.queryClick();
            }
            setTimeout(function () {
                _this.refreshLoading = false;
            }, 1000);
        },
        deteleClick() {
            var _this = this;
            this.$confirm("确认删除?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    del({ ids: _this.docForm.verId }).then((res) => {
                        var queryData = JSON.parse(this.$route.query.data);
                        _this.$store
                            .dispatch("tagsView/delView", _this.$route)
                            .then(({ visitedViews }) => {
                                _this.$router.push({
                                    path: "/produce/details",
                                    query: { prodId: queryData.prodId },
                                });
                            }); // 关闭当前tab回到列表
                    });
                })
                .catch(() => {});
        },
        edidClick() {
            var _this = this;
            var data = {
                verId: this.docForm.verId,
                prodId: this.$route.query.prodId,
            };
            this.$router.push({
                path: "/produce/releaseedit",
                query: {
                    data: JSON.stringify(data),
                },
            });
        },
        startClick() {
            var _this = this;
            processStart({
                verId: this.docForm.verId,
            }).then(({ msg }) => {
                Message.success(msg);
                _this.queryClick();
            });
        },
        btnClaim() {
            var _this = this;
            putAction("/flowable/task/claim", {
                taskId: this.executeTaskId,
            })
                .then(({ msg }) => {
                    this.toDoQueryClick();
                    this.btnExcuteTask();
                })
                .catch((response) => {
                    this.toDoQueryClick();
                });
        },
        btnExcuteTask() {
            this.dialogExcuteTaskVisible = true;
        },
        btnUnclaim() {
            putAction("/flowable/task/unclaim", {
                taskId: this.executeTaskId,
            }).then(({ msg }) => {
                Message.success(msg);
                this.toDoQueryClick();
            });
        },
        fileClick(data) {
            window.open(data.fileUrl, "_blank");
        },
    },
};
</script>

<style scoped>
.app {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 84px);
    overflow-y: auto;
}

.details {
    z-index: 1;
    margin-top: 0;
    flex: none;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: space-between;
    box-shadow: inset 0 -1px 0 0 #dadee3;
    padding: 10px 10px;
    box-sizing: border-box;
}

.details-header-status {
    border-radius: 3px;
    padding: 6px 16px;
    border: 1px solid #dadee3;
}

.details-popover-icon {
    font-size: 16px;
    margin-right: 5px;
}

.details-popover-item-item {
    color: #2e405e;
    font-size: 12px;
    line-height: 18px;
}

.rejected {
    color: rgb(236, 0, 25);
}

.completed {
    color: rgb(254, 188, 8);
}

.inProgress {
    color: rgb(74, 144, 226);
}

.toDo {
    color: rgb(254, 115, 0);
}

.details-header-button {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.details-header-button-icon {
    padding: 8px 8px;
    color: #909aaa;
    font-size: 18px;
    margin-left: 10px;
    border-radius: 50%;
}

.details-header-button-icon:hover {
    background-color: #f5f6f8;
}

.refreshRe {
    -webkit-animation: rotate 1.2s linear infinite;
    /*Safari and Chrome*/
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        /* IE 9 */
        -moz-transform: rotate(0deg);
        /* Firefox */
        -o-transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        /* IE 9 */
        -moz-transform: rotate(360deg);
        /* Firefox */
        -o-transform: rotate(360deg);
    }
}

@-webkit-keyframes rotate {
    0% {
        -moz-transform: rotate(0deg);
    }

    100% {
        -moz-transform: rotate(360deg);
    }
}

.details-content {
    padding: 15px 24px;
    width: 100%;
    flex-grow: 1;
    /* overflow-y: auto; */
}

.details-content-title {
    font-size: 24px;
    font-weight: 700;
    margin-top: 8px;
    margin-bottom: 12px;
    display: block;
}

.details-content-misc {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 10px;
}

.item {
    margin-right: 5px;
}

.details-content-misc-copy {
    color: #909aaa;
    padding: 0 5px;
    line-height: 18px;
    background: #f5f6f8;
    border: 0;
    border-radius: 2px;
    display: inline-block;
    white-space: nowrap;
    cursor: pointer;
}

.details-content-misc-copy:hover {
    background-color: #e7e9ee;
}

.details-content-misc-copy-title {
    color: #909aaa;
    font-size: 12px;
}

.details-content-misc-name {
    color: #333333;
    font-size: 14px;
}

.details-content-misc-name:hover {
    color: #2c7ef8;
}

.details-content-misc-subtitle {
    color: #909aaa;
    font-size: 12px;
}

.details-content-tags {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 10px;
}

.details-content-tags-item {
    font-size: 12px;
    margin-right: 10px;
}

.details-content-fields {
    flex: 1;
    padding: 8px 16px;
    background-color: #fafbfb;
    /* margin-top: 10px; */
    border-radius: 4px;
    position: relative;
}

.details-content-fields-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 36px;
}

.details-content-fields-row-item {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.details-content-fields-row-item-label {
    width: 100px;
    display: block;
    font-size: 12px;
    margin-right: 16px;
    color: #333333;
}

.details-content-fields-row-item-right {
    width: 280px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-left: 10px;
}

.details-content-fields-row-item-rightTwo {
    width: 280px;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.item-personInCharge-logo {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin-right: 5px;
}

.item-personInCharge-title {
    font-size: 12px;
    color: #333333;
    man-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.item-personInCharge-logo-box {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.item-personInCharge-logo-icon {
    font-size: 12px;
    color: #333333;
    margin-right: 5px;
    margin-left: 5px;
}

.details-content-type {
    font-size: 12px;
    color: #333333;
}

.details-content-date {
    font-size: 12px;
    color: #333333;
}

.details-content-date-icon {
    color: #909aaa;
    font-size: 16px;
    margin-left: 18px;
    margin-right: 18px;
    margin-top: 1px;
}

.details-content-project-icon {
    font-size: 12px;
    color: #909aaa;
    margin-right: 4px;
    margin-top: 2px;
}

.details-content-project-title {
    font-size: 12px;
    color: #909aaa;
}

.details-content-warehouse-title {
    font-size: 12px;
    color: #333333;
}

.details-content-milepost-title {
    font-size: 12px;
    color: #333333;
}

.details-content-branch-title {
    font-size: 12px;
    color: #333333;
}

.details-content-time-title {
    font-size: 12px;
    color: #333333;
}

.details-content-richtext {
    flex: 1;
    min-height: 40px;
    margin-top: 10px;
}

.details-content-subtask {
    margin-top: 10px;
    flex: 1;
}

.details-content-subtask-title {
    color: #333;
    font-size: 16px;
    margin-bottom: 10px;
    font-weight: bold;
    display: block;
}

.task-table-item {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 10px 4px;
    flex: 1;
}

.task-table-item:hover {
    background-color: #f5f6f8;
}

.task-table-item-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-grow: 1;
}

.task-table-item-address {
    margin: 0 10px;
    padding: 0 5px;
    background: #f5f6f8;
    border: 0;
    border-radius: 2px;
    white-space: nowrap;
    cursor: pointer;
    color: #909aaa;
}

.task-table-item-address:hover {
    color: #333;
    background: #e7e9ee;
}

.task-table-item-address-title {
    font-size: 12px;
}

.task-table-item-title {
    cursor: pointer;
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    color: #2e405e;
    font-size: 12px;
    margin-right: 5px;
    min-width: 52px;
}

.task-table-item-title:hover {
    color: #1890ff;
}

.task-table-item-tag {
    margin-right: 5px;
}

.task-table-item-status {
    max-width: 52px;
    min-width: 22px;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #909aaa;
    margin-right: 5px;
    font-size: 12px;
}

.task-table-item-datebox {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-right: 5px;
    max-width: 140px;
    justify-content: flex-end;
}

.task-table-item-date {
    color: #909aaa;
    margin-right: 5px;
    font-size: 12px;
}

.task-table-item-overdue {
    font-size: 12px;
    color: #ff4949;
    min-width: 52px;
}

.task-table-item-member {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 111px;
    height: 20px;
}

.task-table-item-member-title {
    width: 86px;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: 5px;
}

.task-table-item-member-title:hover {
    color: #1890ff;
}

.task-table-item-member-logo {
    width: 20px;
    height: 20px;
    border-radius: 100%;
    background-color: #e47777;
}

.details-content-operation-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 16px 5px;
    box-shadow: inset 0 -1px 0 0 #dadee3;
}

.details-content-operation-item:last-child {
    box-shadow: inset 0 -1px 0 0 white;
}

/deep/.el-tabs__header {
    margin-bottom: 0px;
}

.details-content-operation-item-icon {
    font-size: 14px;
    color: #909aaa;
    margin-right: 10px;
}

.details-content-operation-item-name {
    font-size: 16px;
    color: #333333;
    margin-right: 5px;
}

.details-content-operation-item-title {
    font-size: 16px;
    color: #333333;
    font-weight: bold;
    margin-right: 10px;
}

.details-content-operation-item-date {
    font-size: 12px;
    color: #909aaa;
}

.details-popover-item-icon {
    color: #909aaa;
    font-size: 14px;
    transition: transform 0.3s;
    cursor: pointer;
    margin-left: 5px;
}

.transformIcon {
    transform: rotateZ(-180deg);
}

.transformIconChoose {
    transform: rotateZ(0deg);
}

.task-enclosure-icon {
    color: #2e405e;
    font-size: 16px;
    margin-right: 5px;
    font-weight: 700;
    cursor: pointer;
}

.task-enclosure-title {
    color: #2e405e;
    font-size: 14px;
    margin-right: 16px;
    max-width: 520px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
}

.task-enclosure-size {
    font-size: 14px;
    font-weight: bold;
    color: #909aaa;
    display: block;
    margin-right: 20px;
}

.task-enclosure-member {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.task-enclosure-member-login {
    width: 20px;
    height: 20px;
    border-radius: 100%;
    margin-right: 5px;
}

.task-enclosure-member-title {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #2e405e;
    font-size: 14px;
    font-weight: bold;
}

.task-enclosure-del-icon {
    font-size: 14px;
    color: #909aaa;
    margin-left: 20px;
}

.details-content-isMask {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    /* background-color: rgba(0, 0, 0, 0.1); */
}

.details-content-relation {
    display: flex;
    flex-direction: row;
    /* margin-top: 10px; */
}
</style>
